<template>
    <div>
        <el-row style="margin-bottom:20px;">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item>友情链接</el-breadcrumb-item>
                <el-breadcrumb-item v-if="showPage==1">链接列表</el-breadcrumb-item>
                <el-breadcrumb-item v-if="showPage==2">新增链接</el-breadcrumb-item>
                <el-breadcrumb-item v-if="showPage==3">修改链接</el-breadcrumb-item>
            </el-breadcrumb>
        </el-row>

        <!--表格-->
        <el-row v-show='showPage==1'>
            <el-row :gutter="10">
                <el-col :span='3'>
                    <el-button type="primary" size="small" @click='add'>新增链接</el-button>
                </el-col>
            </el-row>
            <el-row style="margin-top:10px">
                <el-table :data="table.tableData" border stripe style="width: 100%" 
                size="small" :highlight-current-row="true" ref="multipleTable">
                    <el-table-column
                        label="首页排序"
                        prop="indexNum"
                        min-width="100"
                    ></el-table-column>
                    <el-table-column
                        label="名称"
                        prop="title"
                        min-width="150"
                    ></el-table-column>
                    <el-table-column
                        label="序号"
                        prop="orderNum"
                        min-width="80"
                    ></el-table-column>
                    <el-table-column
                        label="地址"
                        prop="url"
                        min-width="150"
                    ></el-table-column>
               
                    <el-table-column label="操作" min-width="100">
                        <template slot-scope="scope">
                            <template>
                                <el-button type="text" @click="modify(scope.row)">修改</el-button>
                                <el-button type="text" @click="toDelete(scope.row)">删除</el-button>
                            </template>
                        </template>
                    </el-table-column>
                </el-table>
            </el-row>
            <el-row style="margin-top:10px;">
                <span style="font-size:14px; color:red;">排序上的数字，是首页显示的顺序</span>
            </el-row>
        </el-row>

        <!-- 新增修改 -->
        <el-row v-if="showPage==2 || showPage==3">
            <el-row>
                <el-col :span='3'>
                    <el-button type="primary" size="small" @click='showPage=1'>返回列表</el-button>
                </el-col>
            </el-row>
            <el-row style="margin-top:10px;">
                <el-form style="margin-top:10px;" label-position='right' label-width='80px' :model='addForm'
                ref='addForm' size='small' :rules='addForm.rules'>
                    <el-form-item label="链接名称" prop="name">
                        <el-input style="width:500px;" v-model="addForm.title" placeholder="请输入导航名称"></el-input>
                    </el-form-item>
                    <el-form-item label="链接地址" prop="url">
                        <el-input :disabled='addForm.isDisable' style="width:500px;" v-model="addForm.url" placeholder="请输入导航地址"></el-input>
                    </el-form-item>
                    <el-form-item label="排序号" prop='orderNum'>
                        <el-input-number v-model="addForm.orderNum" :min="1" :max="100" :precision="0"></el-input-number>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm('addForm')">保存</el-button>
                    </el-form-item>
                </el-form>
            </el-row>   
        </el-row>
        
    </div>
</template>
<script>
export default {
    data() {
        return {
            showPage: 1,
            table: {
                tableData: []
            },
            addForm: {
                id: '',
                title: '',
                url: '',
                orderNum: '',
                rules: {
                    orderNum: [{required: true, message: '请设置排序号', trigger: 'blur'}],
                    title: [
                        {required: true, message: '请输入标题', trigger: 'blur'},
                        {
                            min: 2,
                            max: 20,
                            message: "长度2-20之间"
                        }
                    ],
                    url: [
                        {required: true, message: '请输入链接地址', trigger: 'blur'},
                        {
                            min: 2,
                            max: 500,
                            message: "长度2-500之间"
                        }
                    ]
                }
            }
        }
    },
    methods: {
        add(){
            this.addForm.id = '';
            this.addForm.title = '';
            this.addForm.url = '';
            this.addForm.orderNum = 1;
            this.showPage = 2;
        },
        modify(row){
            this.addForm.id = row.id;
            this.addForm.title = row.title;
            this.addForm.url = row.url;
            this.addForm.orderNum = row.orderNum;
            this.showPage = 3;
        },
        toDelete(row){
            this.$confirm('确定删除该咨询会图片吗?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                        })
            .then(() => {
                let p = {};
                let url = '/api/friendLink/delete';
                p.id = row.id;
                return this.$http.fetch(url, p)
            })
            .then(res => {
                this.listAll();
            })
            .catch(() => {
                
            })
        },
        
        listAll(){
            let p = {};
            let url = '/api/friendLink/listAll';
            this.$http.fetch(url, p)
            .then(res=>{
                this.table.tableData = res.data;
            })
        },

        submitForm(formName){
            this.$refs[formName].validate((valid)=>{
                if(valid){
                    let p = {};
                    let url;
                    // 新增
                    if(this.showPage==2){
                        url = '/api/friendLink/add';
                    }else{
                        url = '/api/friendLink/modify';
                        p.id = this.addForm.id;
                    }
                    p.title = this.addForm.title;
                    p.url = this.addForm.url;
                    p.orderNum = this.addForm.orderNum;
                    this.$http.fetch(url, p)
                    .then(res=>{
                        this.listAll();
                        this.showPage = 1;
                    })
                }
            });
        }

    },
    mounted(){
        this.listAll();
    }
}
</script>

<style scoped>

</style>